import React, { useEffect, useState } from 'react'
import { useLocation } from 'react-router-dom'
import { Button, Card, Toast } from 'antd-mobile';
import { MessageOutline, AntOutline, RightOutline } from "antd-mobile-icons";
import { useNavigate } from 'react-router-dom';

export default function Czs_settlement() {
    const navigate = useNavigate()
    const location = useLocation()
    const { content, type } = location.state
    const [totalprice, setTotalprice] = useState(0)
    const [list, setList] = useState([
        {
            id: 1,
            name: '客厅',
            price: 120,
            count: 0
        },
        {
            id: 2,
            name: '阳台',
            price: 80,
            count: 0
        },
        {
            id: 3,
            name: '卧室',
            price: 100,
            count: 0
        },
        {
            id: 4,
            name: '浴室',
            price: 140,
            count: 0
        },
        {
            id: 5,
            name: '厨房',
            price: 180,
            count: 0
        },
        {
            id: 6,
            name: '餐厅',
            price: 80,
            count: 0
        },
        {
            id: 7,
            name: '车库',
            price: 160,
            count: 0
        },
    ])
    const jian = (item) => {
        const newlist = [...list]
        const index = newlist.findIndex(t => t.id == item.id)
        if(newlist[index].count > 0) {
            newlist[index].count = newlist[index].count - 1
        }else {
            return
        }
        setList(newlist)
        setTotalprice(totalprice - item.price)
    }
    const jia = (item) => {
        const newlist = [...list]
        const index = newlist.findIndex(t => t.id == item.id)
        newlist[index].count = newlist[index].count + 1
        setList(newlist)
        setTotalprice(totalprice + item.price)
    }
    return (
        <div className='czs_settlement'>
            <div className="czs_top">
                <div>
                    <img
                        onClick={() => {
                            navigate(-1);
                        }}
                        className="czs_back"
                        src="./czs_imgs/返回.png"
                        alt=""
                    />
                    <span className="czs_title"><b>{content}</b></span>
                </div>
                <MessageOutline className="czs_message" onClick={() => {
                    navigate('/lmsg');
                }} />
            </div>
            <p className='czs_top_p'>请选择需要清洁的项目数。</p>
            <div>
                {list.map(item => {
                    return <div key={item.id}>
                        <Card title={item.name} className='czs_settlement_card' >
                            <div className='czs_settlement_card_div'>
                                <p className='czs_settlement_card_p' onClick={() => {
                                    jian(item)
                                }}>-</p>
                                <span className='czs_settlement_card_span'>{item.count}</span>
                                <p className='czs_settlement_card_p' onClick={() => {
                                    jia(item)
                                }}>+</p>
                            </div>
                        </Card>
                    </div>
                })}
            </div>
            <button className='czs_settlement_btn' onClick={() => {
                navigate('/apps', {state: {totalprice: totalprice}})
            }}>下一步-￥{totalprice}</button>
        </div>
    )
}
